<template>
  <view class="order-page" :style="{'--primary-color': primaryColor}">
    <!-- 页面加载状态 -->
    <PageLoading :show="pageLoading" :primary-color="primaryColor" loading-text="加载中..." />
    
    <!-- 页面主要内容 -->
    <view class="page-content" v-show="true">
    <!-- 订单状态筛选卡片 -->
    <view class="filter-card" :style="{'--primary-color': primaryColor}">
      <view class="card-header">
        <view class="header-left">
          <text class="card-title">订单状态</text>
          <text class="card-subtitle">选择要查看的订单类型</text>
        </view>
        <view class="refresh-button" @click="refreshOrderList">
          <text class="refresh-icon">↻</text>
        </view>
      </view>
      <scroll-view class="order-tabs" scroll-x="true" show-scrollbar="false">
        <view class="tabs-container">
          <view 
            class="tab-item" 
            :class="{ 'active': currentTab === index }"
            v-for="(tab, index) in tabs" 
            :key="index"
            @click="switchTab(index)"
          >
            <text class="tab-text">{{ tab.name }}</text>
            <view class="tab-indicator" v-if="currentTab === index"></view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-wrapper" v-if="loading">
      <view class="loading-content">
        <text class="loading-text">加载中...</text>
      </view>
    </view>
    
    <!-- 订单列表 -->
    <scroll-view class="content-scroll" scroll-y v-else>
      <view class="order-list">
        <view 
          class="order-card" 
          v-for="order in currentOrders" 
          :key="order.orderId"
          :style="{
            'box-shadow': '0 4rpx 20rpx rgba(0, 0, 0, 0.05), 0 8rpx 30rpx ' + primaryColor + '12',
            'border': '1rpx solid ' + primaryColor + '20'
          }"
          @click="viewOrderDetail(order)"
        >
          <!-- 订单头部 -->
          <view class="order-header">
            <view class="order-info">
              <view class="order-number">
                <text class="order-label">订单号</text>
                <text class="order-no">{{ order.orderNo }}</text>
              </view>
              <text class="order-time">{{ order.createTime }}</text>
            </view>
            <view class="order-status-wrapper">
              <view class="status-badge" :class="order.statusClass">
                <text class="status-text">{{ order.statusText }}</text>
              </view>
            </view>
          </view>
          
          <!-- 商品列表 -->
          <view class="goods-section">
            <view class="section-title">
              <text class="title-text">商品信息</text>
              <text class="goods-count">{{ (order.goodsList && order.goodsList.length) || 0 }}件商品</text>
            </view>
            <view class="goods-list">
              <view 
                class="goods-item" 
                v-for="goods in (order.goodsList || [])" 
                :key="goods.id"
                :style="{
                  'box-shadow': '0 4rpx 20rpx rgba(0, 0, 0, 0.05), 0 4rpx 12rpx ' + primaryColor + '08',
                  'border': '1rpx solid ' + primaryColor + '15'
                }"
              >
                <view class="goods-image-wrapper">
                  <image class="goods-image" :src="goods.skuImage || goods.image" mode="aspectFill" />
                </view>
                <view class="goods-info">
                  <text class="goods-name">{{ goods.skuName || goods.name || goods.productName || goods.realProductName || '未知商品' }}</text>
                  <text class="goods-spec" v-if="goods.spec">{{ goods.spec }}</text>
                  <view class="goods-price-qty">
                    <text class="goods-price">¥{{ goods.price }}</text>
                    <text class="goods-qty">×{{ goods.quantity }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 订单底部 -->
          <view class="order-footer">
            <view class="total-section">
              <view class="total-info">
                <text class="total-label">实付金额</text>
                <text class="total-price">¥{{ order.paymentAmount || order.totalAmount }}</text>
              </view>
              <text class="total-detail">共{{ order.totalQuantity || 0 }}件商品</text>
            </view>
            <view class="order-actions">
              <view 
                class="action-btn secondary" 
                v-if="order.canCancel"
                @click.stop="cancelOrder(order)"
              >
                <text class="btn-text">取消订单</text>
              </view>
              <view 
                class="action-btn primary" 
                v-if="order.canPay"
                @click.stop="payOrder(order)"
              >
                <text class="btn-text">立即支付</text>
              </view>
              <!-- 确认收货按钮已隐藏，统一到订单详情页实现 -->
              <!-- <view 
                class="action-btn secondary" 
                v-if="order.canConfirm"
                @click.stop="confirmOrder(order)"
              >
                <text class="btn-text">确认收货</text>
              </view> -->
              <view 
                class="action-btn primary" 
                v-if="order.canEvaluate"
                @click.stop="evaluateOrder(order)"
              >
                <text class="btn-text">评价订单</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    
    </view>
  </view>
</template>

<script>
import { listUserOrder, getUserOrder, getOrderItems, listUserOrderWithProducts, updateOrderStatus, checkCommentStatus } from '@/api/order'
import { API_CONFIG } from '@/api/config'
import browseTracker from '@/utils/browseTracker'
import { getToken, getUserInfo } from '@/utils/auth'
import { checkLoginStatus, handleApiError } from '@/utils/loginCheck'
import { getThemeColorFromGlobal, getThemePrimaryColor } from '@/utils/themeUtils'
import PageLoading from '@/components/PageLoading/index.vue'
import pageLoadingMixin from '@/mixins/pageLoading.js'

export default {
  components: {
    PageLoading
  },
  mixins: [pageLoadingMixin],
  data() {
    return {
      currentTab: 0,
      loading: false,
      themeColor: '1', // 默认主题色
      tabs: [
        { name: '全部', status: null },
        { name: '待付款', status: 1 },
        { name: '待发货', status: 2 },
        { name: '待收货', status: 3 },
        { name: '已完成', status: 4 },
        { name: '已取消', status: 5 },
        { name: '已退款', status: 6 }
      ],
      orders: [],
      allOrders: [], // 缓存所有订单数据
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderStatus: null
      },
      isDataLoaded: false, // 标记数据是否已加载
      lastUserInfo: null // 缓存上次的用户信息，用于检测用户切换
    };
  },
  
  async onLoad(options) {
    // 开始页面加载
    this.startPageLoading()
    
    // 监听确认收货成功事件
    uni.$on('confirmOrderSuccess', this.handleConfirmOrderSuccess);
    
    try {
      // 处理tab参数，设置当前选中的标签页
      if (options.tab !== undefined) {
        const tabIndex = parseInt(options.tab)
        if (tabIndex >= 0 && tabIndex < this.tabs.length) {
          this.currentTab = tabIndex
        }
      }
      
      // 初始化主题色
      await this.initThemeColor();
      this.markThemeLoaded()
      
      this.startBrowseTracking();
      await this.getOrderList();
      
      // 标记数据已加载
      this.markDataLoaded()
    } catch (error) {
      // console.error('订单页面加载失败:', error)
      this.forceCompletePageLoading()
    }
  },
  
  onShow() {
    browseTracker.resume();
    // 页面显示时检查登录状态
    const loginResult = this.checkLogin({ showToast: false })
    if (loginResult.isLoggedIn) {
      // 检查是否需要刷新数据（组织切换等情况）
      this.checkAndRefreshOrderData()
    }
  },
  
  onHide() {
    browseTracker.pause();
  },
  
  onUnload() {
    browseTracker.stopTracking();
    // 移除确认收货成功事件监听
    uni.$off('confirmOrderSuccess', this.handleConfirmOrderSuccess);
  },
  
  beforeDestroy() {
    browseTracker.stopTracking();
    // 移除确认收货成功事件监听
    uni.$off('confirmOrderSuccess', this.handleConfirmOrderSuccess);
  },
  
  computed: {
    // 动态主题色
    primaryColor() {
      return getThemePrimaryColor(this.themeColor)
    },

    currentOrders() {
      if (!this.isDataLoaded) {
        return [];
      }
      
      if (this.currentTab === 0) {
        return this.allOrders;
      }
      
      const status = this.tabs[this.currentTab].status;
      
      return this.allOrders.filter(order => {
        // 将订单状态转换为数字进行比较
        const orderStatusNum = parseInt(order.orderStatus);
        return orderStatusNum === status;
      });
    }
  },
  
  methods: {
    // 初始化主题色
    async initThemeColor() {
      const themeColor = await getThemeColorFromGlobal()
      this.themeColor = themeColor
      // console.log('订单页面 - 初始化主题色:', themeColor)
    },
    // 获取订单列表
    async getOrderList() {
      try {
        this.loading = true;
        // 如果数据已加载，直接返回，避免重复请求
        if (this.isDataLoaded && this.allOrders.length > 0) {
          this.loading = false;
          return;
        }
        
        // 使用统一的登录检测
        const loginResult = await checkLoginStatus()
        if (!loginResult.isLoggedIn) {
          this.loading = false;
          return;
        }
        
        // 获取全部订单数据进行缓存
        this.queryParams.orderStatus = null;
        this.queryParams.userId = loginResult.userId;
        
        const response = await listUserOrderWithProducts(this.queryParams, loginResult.userId);
        if (response.code === 200) {
          const orderData = response.data || [];
          
          // 处理订单数据
          this.allOrders = orderData.map(item => {
            const order = item.order;
            const items = item.items || [];
            const totalQuantity = item.totalQuantity || 0;
            
            // 处理商品列表
            order.goodsList = items.map(itemData => {
              const orderItem = itemData.orderItem;
              const product = itemData.product;
              
              let spec = '';
              try {
                if (orderItem.productSpec) {
                  const specObj = JSON.parse(orderItem.productSpec);
                  spec = Object.entries(specObj).map(([key, value]) => `${key}: ${value}`).join(', ');
                }
              } catch (e) {
                spec = orderItem.productSpec || '';
              }
              
              // 处理图片URL，优先使用SKU图片，其次使用订单商品图片，最后使用商品主图
              let imageUrl = '';
              const sku = itemData.sku;
              
              if (sku && sku.image) {
                // 优先使用SKU图片（七牛云存储，直接使用完整URL）
                imageUrl = sku.image;
              } else if (orderItem.productImage) {
                // 其次使用订单商品图片（七牛云存储，直接使用完整URL）
                imageUrl = orderItem.productImage;
              } else if (product && product.mainImage) {
                // 最后使用商品主图（七牛云存储，直接使用完整URL）
                imageUrl = product.mainImage;
              }
              
              return {
                id: orderItem.orderItemId,
                name: orderItem.productName,
                spec: spec,
                price: orderItem.productPrice,
                quantity: orderItem.productQuantity,
                image: imageUrl,
                productId: orderItem.productId,
                product: product, // 保存完整的商品信息
                // 添加SKU相关字段供模板使用
                skuName: sku ? sku.skuName : null,
                skuImage: sku && sku.image ? sku.image : null, // 七牛云存储，直接使用完整URL
                skuSpecInfo: sku ? (typeof sku.specInfo === 'string' ? sku.specInfo : JSON.stringify(sku.specInfo)) : null,
                productName: orderItem.productName || orderItem.realProductName,
                realProductName: orderItem.realProductName
              };
              });
             
             order.totalQuantity = totalQuantity;
            
            // 确保paymentAmount字段存在，如果不存在则使用totalAmount
            if (!order.paymentAmount && order.totalAmount) {
              order.paymentAmount = order.totalAmount;
            }
            
            // 设置订单状态相关属性
            this.setOrderStatus(order);
            
            return order;
          });
        } else {
          // 即使API返回错误，也要初始化为空数组，确保页面能正常显示
          this.allOrders = [];
        }
        
        // 无论API调用成功与否，都标记数据已加载，确保页面内容能显示
        this.isDataLoaded = true;
      } catch (error) {
        // console.error('获取订单列表失败:', error);
        // 即使出现异常，也要确保页面能正常显示
        this.allOrders = [];
        this.isDataLoaded = true;
        await handleApiError(error, {
          showToast: true,
          autoRedirect: false,
          autoWechatLogin: true
        });
      } finally {
        this.loading = false;
      }
    },
    
    // 设置订单状态
    setOrderStatus(order) {
      const statusMap = {
        1: { text: '待付款', class: 'pending', canCancel: true, canPay: false, canConfirm: false },
        2: { text: '待发货', class: 'paid', canCancel: false, canPay: false, canConfirm: false },
        3: { text: '待收货', class: 'shipped', canCancel: false, canPay: false, canConfirm: true },
        4: { text: '已完成', class: 'completed', canCancel: false, canPay: false, canConfirm: false },
        5: { text: '已取消', class: 'cancelled', canCancel: false, canPay: false, canConfirm: false },
        6: { text: '已退款', class: 'refunded', canCancel: false, canPay: false, canConfirm: false }
      };
      
      const status = statusMap[order.orderStatus] || statusMap[1];
      order.statusText = status.text;
      order.statusClass = status.class;
      order.canCancel = status.canCancel;
      order.canPay = status.canPay;
      order.canConfirm = status.canConfirm;
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 切换标签
    switchTab(index) {
      this.currentTab = index;
      // 如果数据未加载，则加载数据；否则直接切换
      if (!this.isDataLoaded) {
        this.getOrderList();
      }
    },
    
    // 查看订单详情
    viewOrderDetail(order) {
      uni.navigateTo({
        url: `/pages/order/detail?orderNo=${order.orderNo}`
      });
    },
    
    // 取消订单
    cancelOrder(order) {
      uni.showModal({
        title: '确认取消',
        content: '确定要取消这个订单吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 调用取消订单API，将状态改为5（已取消）
              const response = await updateOrderStatus(order.orderId, '5');
              if (response.code === 200) {
                uni.showToast({
                  title: '订单已取消',
                  icon: 'success'
                });
                // 刷新订单数据
                this.refreshOrderList();
              } else {
                uni.showToast({
                  title: response.msg || '取消订单失败',
                  icon: 'none'
                });
              }
            } catch (error) {
              // console.error('取消订单失败:', error);
              uni.showToast({
                title: '取消订单失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 刷新订单数据
    refreshOrderList() {
      this.isDataLoaded = false;
      this.allOrders = [];
      this.getOrderList();
    },
    
    // 支付订单
    payOrder(order) {
      // 检查收货地址是否为空
      if (!order.receiverName || !order.receiverPhone || !order.receiverAddress) {
        uni.showModal({
          title: '提示',
          content: '请先填写或选择收货地址后再进行支付',
          showCancel: true,
          cancelText: '取消',
          confirmText: '去填写',
          success: (res) => {
            if (res.confirm) {
              // 跳转到地址管理页面
              uni.navigateTo({
                url: '/pages/address/list'
              });
            }
          }
        });
        return;
      }
      
      uni.showModal({
        title: '确认支付',
        content: '确定要支付这个订单吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 调用支付订单API，将状态改为2（待发货）
              const response = await updateOrderStatus(order.orderId, '2');
              if (response.code === 200) {
                uni.showToast({
                  title: '支付成功',
                  icon: 'success'
                });
                // 刷新订单数据
                this.refreshOrderList();
              } else {
                uni.showToast({
                  title: response.msg || '支付失败',
                  icon: 'none'
                });
              }
            } catch (error) {
              // console.error('支付失败:', error);
              await handleApiError(error, {
                showToast: true,
                autoRedirect: false,
                autoWechatLogin: true
              });
            }
          }
        }
      });
    },
    
    // 去购物
    goShopping() {
      uni.switchTab({
        url: '/pages/index'
      });
    },
    
    // 确认收货
    async confirmOrder(order) {
      // 通过后端接口获取商户公开信息（merchant_id）
      const { fetchWxMerchantPublicInfo } = await import('@/api/order')
      let merchantId = null
      try {
        const pubInfo = await fetchWxMerchantPublicInfo()
        merchantId = (pubInfo && pubInfo.data && (pubInfo.data.merchantId || pubInfo.data.mchId)) || null
      } catch (e) {
        console.warn('获取商户ID失败，将仅使用订单号调用确认组件', e)
      }
      // 调用微信确认收货组件
      wx.openBusinessView({
        businessType: 'weappOrderConfirm',
        extraData: {
          merchant_id: merchantId,
          merchant_trade_no: order.orderNo
        },
        success: (res) => {
        },
        fail: (err) => {
          console.error('微信确认收货组件调用失败:', err)
          uni.showToast({
            title: '确认收货组件调用失败，请重试',
            icon: 'none'
          })
        }
      })
    },

    // 处理确认收货成功回调
    handleConfirmOrderSuccess(extraData) {
      // 根据订单号查找对应的订单并调用确认收货接口
      // 修复：使用allOrders而不是未定义的orderList
      const order = this.allOrders.find(item => item.orderNo === extraData.merchant_trade_no);
      if (order) {
        this.handleConfirmOrderCallback(order);
      }
    },

    // 处理微信确认收货组件的回调
    async handleConfirmOrderCallback(order) {
      try {
        uni.showLoading({ title: '确认中...' });
        // 调用确认收货API，将状态改为4（已完成）
        // 使用orderId作为API参数，这是正确的订单ID字段
        const response = await updateOrderStatus(order.orderId, '4');
        uni.hideLoading();
        
        if (response.code === 200) {
          uni.showToast({
            title: '确认收货成功',
            icon: 'success'
          });
          // 更新本地订单状态
          order.orderStatus = '4';
          // 重新设置订单状态相关属性
          this.setOrderStatus(order);
          // 刷新订单数据
          this.refreshOrderList();
        } else {
          uni.showToast({
            title: response.msg || '确认收货失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        // console.error('确认收货失败:', error);
        await handleApiError(error, {
          showToast: true,
          autoRedirect: false,
          autoWechatLogin: true
        });
      }
    },
    
    // 评价订单
    async evaluateOrder(order) {
      // console.log('评价订单:', order);
      // 检查商品列表是否存在
      if (!order.goodsList || order.goodsList.length === 0) {
        uni.showToast({
          title: '商品信息异常',
          icon: 'none'
        });
        return;
      }
      
      try {
        // 检查是否已经评价过
        const response = await checkCommentStatus(
          order.orderId,
          order.goodsList[0].productId
        );
        
        if (response.code === 200 && response.data.hasCommented) {
          uni.showModal({
            title: '提示',
            content: '您已经评价过该商品，无法重复评价',
            showCancel: false
          });
          return;
        }
      } catch (error) {
        // console.error('检查评价状态失败:', error);
        await handleApiError(error, {
          showToast: true,
          autoRedirect: false,
          autoWechatLogin: true
        });
      }
      
      // 跳转到评价页面，传递订单ID和商品ID
      uni.navigateTo({
        url: `/pages/order/evaluate?orderId=${order.id}&productId=${order.goodsList[0].productId}`
      });
    },
    
    // 检查登录状态
    checkLogin(options = {}) {
      const token = getToken();
      const userInfo = getUserInfo();
      
      if (!token || !userInfo || !userInfo.userId) {
        if (options.showToast !== false) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          });
        }
        return { isLoggedIn: false };
      }
      
      return {
        isLoggedIn: true,
        userId: userInfo.userId,
        userInfo: userInfo
      };
    },
    
    // 检查并刷新订单数据
    checkAndRefreshOrderData() {
      const currentUserInfo = getUserInfo();
      
      // 如果用户信息发生变化（如切换组织），则刷新数据
      if (!this.lastUserInfo || 
          this.lastUserInfo.userId !== currentUserInfo.userId ||
          this.lastUserInfo.orgId !== currentUserInfo.orgId) {
        this.lastUserInfo = currentUserInfo;
        this.refreshOrderList();
      } else if (!this.isDataLoaded) {
        // 如果数据未加载，则加载数据
        this.getOrderList();
      }
    },
    
    // 开始浏览时长记录
    startBrowseTracking() {
      const token = getToken();
      const userInfo = getUserInfo();
      if (token && userInfo && userInfo.userId) {
        browseTracker.startTracking({
          pageType: 'order',
          pageName: '我的订单',
          pageUrl: '/pages/order/index'
        }, userInfo.userId);
      }
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.order-page {
  background: #FFFFFF;
  min-height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 40rpx;
}



/* 加载状态 */
.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  background: #FFFFFF;
  margin: 32rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent);
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666666;
  font-weight: 500;
}

/* 筛选卡片 */
.filter-card {
  margin: 32rpx 32rpx 24rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #e2e8f0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32rpx;
}

.header-left {
  flex: 1;
}

.card-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.card-subtitle {
  font-size: 28rpx;
  color: #8A8A8A;
  display: block;
}

.refresh-button {
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent);
  transition: all 0.3s ease;
}

.refresh-button:active {
  transform: scale(0.95);
  background: color-mix(in srgb, var(--primary-color, #4A90E2) 20%, transparent);
}

.refresh-icon {
  font-size: 36rpx;
  color: var(--primary-color, #4A90E2);
  font-weight: 600;
}

/* 标签页 */
.order-tabs {
  background: color-mix(in srgb, var(--primary-color, #4A90E2) 5%, #FFFFFF);
  border-radius: 16rpx;
  padding: 8rpx;
  position: relative;
  white-space: nowrap;
}

.tabs-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tab-item {
  flex: none;
  min-width: 120rpx;
  text-align: center;
  padding: 20rpx 16rpx;
  position: relative;
  border-radius: 12rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  margin-right: 8rpx;
}

.tab-item:last-child {
  margin-right: 0;
}

.tab-item:active {
  transform: scale(0.98);
}

.tab-item.active {
  background: var(--primary-color, #4A90E2) !important;
  box-shadow: 0 4rpx 16rpx color-mix(in srgb, var(--primary-color, #4A90E2) 30%, transparent);
  border: 1rpx solid var(--primary-color, #4A90E2);
}

.tab-item:hover {
  background: color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent);
}

.tab-item.active:hover {
  background: color-mix(in srgb, var(--primary-color, #4A90E2) 90%, #000000) !important;
  box-shadow: 0 6rpx 20rpx color-mix(in srgb, var(--primary-color, #4A90E2) 40%, transparent);
  transform: translateY(-2rpx);
}

.tab-text {
  font-size: 28rpx;
  color: #666666;
  font-weight: 500;
  text-align: center;
  display: block;
  transition: color 0.3s ease;
}

.tab-item.active .tab-text {
  color: #FFFFFF;
  font-weight: 600;
}

.tab-indicator {
  position: absolute;
  bottom: -4rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 24rpx;
  height: 6rpx;
  background: #FFFFFF;
  border-radius: 3rpx;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 内容滚动区域 */
.content-scroll {
  height: calc(100vh - 240rpx);
  padding: 24rpx 32rpx;
}

/* 订单列表 */
.order-list {
  padding-bottom: 60rpx;
}

/* 订单卡片 */
.order-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 40rpx;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.order-card:active {
  transform: translateY(-4rpx);
}

/* 订单头部 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 36rpx 32rpx;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #4A90E2) 5%, #FFFFFF) 0%, #FFFFFF 100%);
  border-bottom: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent);
}

.order-info {
  flex: 1;
}

.order-number {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.order-label {
  font-size: 24rpx;
  color: var(--primary-color, #4A90E2);
  margin-right: 16rpx;
  border: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 30%, transparent);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  background: transparent;
}

.order-no {
  font-size: 28rpx;
  color: #1A1A1A;
  font-weight: 600;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.order-time {
  font-size: 26rpx;
  color: #8A8A8A;
  margin-top: 4rpx;
}

/* 状态徽章 */
.order-status-wrapper {
  margin-left: 24rpx;
}

.status-badge {
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid;
}

.status-badge.pending {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--primary-color, #4A90E2);
}

.status-badge.paid {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--primary-color, #4A90E2);
}

.status-badge.shipped {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--primary-color, #4A90E2);
}

.status-badge.completed {
  background: linear-gradient(135deg, rgba(138, 138, 138, 0.1) 0%, rgba(138, 138, 138, 0.05) 100%);
  border-color: rgba(138, 138, 138, 0.2);
}

.status-badge.cancelled {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(107, 114, 128, 0.05) 100%);
  border-color: rgba(107, 114, 128, 0.2);
}

.status-badge.refunded {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(239, 68, 68, 0.2);
}

.status-text {
  font-size: 26rpx;
  font-weight: 600;
}

.status-badge.pending .status-text {
  color: var(--primary-color, #4A90E2);
}

.status-badge.paid .status-text {
  color: var(--primary-color, #4A90E2);
}

.status-badge.shipped .status-text {
  color: var(--primary-color, #4A90E2);
}

.status-badge.completed .status-text {
  color: #8A8A8A;
}

.status-badge.cancelled .status-text {
  color: #6B7280;
}

.status-badge.refunded .status-text {
  color: #EF4444;
}

/* 商品信息区域 */
.goods-section {
  padding: 32rpx 32rpx 32rpx;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent);
}

.title-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
}

.goods-count {
  font-size: 24rpx;
  color: var(--primary-color, #4A90E2);
  border: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 30%, transparent);
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  background: transparent;
}

.goods-list {
  border-radius: 16rpx;
  padding: 20rpx;
}

.goods-item {
  display: flex;
  padding: 24rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.goods-item:last-child {
  margin-bottom: 0;
}

.goods-item:active {
  transform: scale(0.98);
}

.goods-image-wrapper {
  position: relative;
  margin-right: 28rpx;
}

.goods-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background: transparent;
  border: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 15%, transparent);
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 4rpx;
}

.goods-name {
  font-size: 30rpx;
  color: #1A1A1A;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-spec {
  font-size: 26rpx;
  color: var(--primary-color, #4A90E2);
  border: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 30%, transparent);
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
  display: inline-block;
  margin-bottom: 20rpx;
  background: transparent;
}

.goods-price-qty {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goods-price {
  font-size: 32rpx;
  color: var(--primary-color, #4A90E2);
  font-weight: 700;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.goods-qty {
  font-size: 26rpx;
  color: #8A8A8A;
  border: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 20%, transparent);
  padding: 6rpx 12rpx;
  border-radius: 8rpx;
  font-weight: 500;
  background: transparent;
}

/* 订单底部 */
.order-footer {
  padding: 36rpx 32rpx;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #4A90E2) 5%, #FFFFFF) 0%, #FFFFFF 100%);
  border-top: 1rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent);
}

.total-section {
  margin-bottom: 32rpx;
}

.total-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}

.total-label {
  font-size: 28rpx;
  color: #1A1A1A;
  font-weight: 600;
}

.total-price {
  font-size: 36rpx;
  color: var(--primary-color, #4A90E2);
  font-weight: 700;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

.total-detail {
  font-size: 24rpx;
  color: #8A8A8A;
  text-align: right;
}

.order-actions {
  display: flex;
  gap: 16rpx;
  justify-content: flex-end;
}

.action-btn {
  padding: 20rpx 32rpx;
  border-radius: 20rpx;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.action-btn:active {
  transform: scale(0.95);
}

.action-btn.primary {
  background: linear-gradient(135deg, var(--primary-color, #4A90E2) 0%, color-mix(in srgb, var(--primary-color, #4A90E2) 85%, #000000) 100%);
  box-shadow: 0 4rpx 16rpx color-mix(in srgb, var(--primary-color, #4A90E2) 30%, transparent);
}

.action-btn.primary:active {
  box-shadow: 0 2rpx 8rpx color-mix(in srgb, var(--primary-color, #4A90E2) 40%, transparent);
}

.action-btn.secondary {
  background: #FFFFFF;
  border: 2rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 20%, transparent);
  box-shadow: 0 2rpx 8rpx color-mix(in srgb, var(--primary-color, #4A90E2) 5%, transparent);
}

.action-btn.secondary:active {
  background: color-mix(in srgb, var(--primary-color, #4A90E2) 5%, transparent);
  border-color: color-mix(in srgb, var(--primary-color, #4A90E2) 30%, transparent);
}

.btn-text {
  font-size: 28rpx;
  font-weight: 600;
}

.action-btn.primary .btn-text {
  color: #FFFFFF;
}

.action-btn.secondary .btn-text {
  color: var(--primary-color, #4A90E2);
}

/* 空状态 */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80rpx 32rpx;
  min-height: 400rpx;
}

.empty-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(74, 144, 226, 0.2), 0 2rpx 8rpx rgba(74, 144, 226, 0.1);
  border: 3rpx solid rgba(74, 144, 226, 0.3);
  max-width: 400rpx;
  width: 100%;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto 32rpx;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color, #4A90E2) 5%, #FFFFFF) 0%, color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid color-mix(in srgb, var(--primary-color, #4A90E2) 10%, transparent);
}

.icon-text {
  font-size: 60rpx;
  line-height: 1;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 16rpx;
  display: block;
}

.empty-subtitle {
  font-size: 28rpx;
  color: #8A8A8A;
  line-height: 1.5;
  margin-bottom: 40rpx;
  display: block;
}

.empty-action {
  background: linear-gradient(135deg, var(--primary-color, #4A90E2) 0%, color-mix(in srgb, var(--primary-color, #4A90E2) 85%, #000000) 100%);
  border-radius: 20rpx;
  padding: 24rpx 48rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 4rpx 16rpx color-mix(in srgb, var(--primary-color, #4A90E2) 30%, transparent);
}

.empty-action:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx color-mix(in srgb, var(--primary-color, #4A90E2) 40%, transparent);
}

.action-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #FFFFFF;
}

/* 响应式动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.order-card {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.order-card:nth-child(2) {
  animation-delay: 0.1s;
}

.order-card:nth-child(3) {
  animation-delay: 0.2s;
}

.order-card:nth-child(4) {
  animation-delay: 0.3s;
}
</style>
